<template>
  <div id="app">
    <el-form
      :inline="true"
      size="mini"
      :model="formInline"
      class="demo-form-inline searchFrom"
      label-width="80px"
    >
      <el-row>
        <el-col :span="5">
          <el-form-item label="登录名">
            <el-input v-model="formInline.logonName" placeholder="请输入登录名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="姓名">
            <el-input v-model="formInline.displayName" placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="所属机构">
            <!-- <el-select v-model="formInline.orgId" placeholder="所属机构">
              <el-option label="管理员" value="管理员"></el-option>
              <el-option label="系统" value="系统"></el-option>
            </el-select>-->
            <el-cascader
              expand-trigger="hover"
              :options="treeData"
              v-model="formInline.orgId"
              :props="{label: 'orgName',value: 'id'}"
              style="width:100%"
              :show-all-levels="false"
              :clearable="true"
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="用户状态">
            <el-select clearable v-model="formInline.userState" placeholder="请选择用户状态">
              <el-option label="正常" value="1"></el-option>
              <el-option label="锁定" value="2"></el-option>
              <el-option label="注销" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button type="primary" @click="onAddUser">添加用户</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="logonName" label="登录名"></el-table-column>
      <el-table-column prop="displayName" label="姓名"></el-table-column>
      <el-table-column prop="orgName" label="所属机构"></el-table-column>
      <!-- <el-table-column prop="userType" label="用户类型"></el-table-column> -->
      <el-table-column prop="userType" label="用户类型">
        <template slot-scope="scope">
          <span>{{ scope.row.userType | userType}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="userState" label="用户状态">
        <template slot-scope="scope">
          <span>{{ scope.row.userState | userState}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <i class="el-icon-edit" @click="tableEdit(scope.$index, scope.row)" title="修改"></i>
          <!-- <i class="el-icon-refresh" @click="initPasswd(scope.$index, scope.row)"></i> -->
          <ep-delete
            info="重置密码"
            :id="scope.row.id"
            url="sys/user/initPasswd"
            :init="true"
            @init="initTable"
          >
            <i class="el-icon-refresh" title="重置密码"></i>
          </ep-delete>
          <ep-delete :id="scope.row.id" url="sys/user/logoutUser" :init="true" @init="initTable">
            <i class="el-icon-delete" title="删除"></i>
          </ep-delete>
          <ep-delete
            info="解锁"
            :id="scope.row.id"
            url="sys/user/unlockUser"
            :init="true"
            @init="initTable"
          >
            <i class="iconfont icon-jiesuo" title="解锁"></i>
          </ep-delete>
          <ep-delete
            info="锁定"
            :id="scope.row.id"
            url="sys/user/lockUser"
            :init="true"
            @init="initTable"
          >
            <i class="iconfont icon-suo" title="锁定"></i>
          </ep-delete>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageblock">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="settingTotal"
      ></el-pagination>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="70%">
      <el-form :model="userInfo" label-width="100px" :rules="dialogFormRules" ref="ruleFrom">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="登录名" prop="logonName">
              <el-input v-model="userInfo.logonName" placeholder="请输入登录名" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="姓名" prop="displayName">
              <el-input v-model="userInfo.displayName" placeholder="请输入姓名" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户类型" prop="userType">
              <el-select
                v-model="userInfo.userType"
                @change="uesrTypeChange"
                placeholder="请选择用户类型"
                style="width:100%"
                :disabled="userTypeDisabled"
              >
                <el-option disabled label="系统管理员" value="1"></el-option>
                <el-option label="行政区管理员" value="2"></el-option>
                <el-option label="机构管理员" value="3"></el-option>
                <el-option label="业务操作员" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="密码" prop="passwd">
              <el-input
                type="password"
                placeholder="请输入密码"
                v-model="userInfo.passwd"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="确认密码" prop="checkPass">
              <el-input
                type="password"
                placeholder="请再次输入密码"
                v-model="userInfo.checkPass"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户过期时间">
              <el-date-picker
                v-model="userInfo.userExpireDate"
                style="width:100%"
                type="date"
                placeholder="请选择用户过期时间"
                :picker-options="pickerOptions1"
                @change="userDateChange"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="密码过期策略">
              <el-select
                v-model="userInfo.pwExpireType"
                @change="pwChange"
                placeholder="请选择密码过期策略"
                style="width:100%"
              >
                <el-option label="系统配置周期" value="1"></el-option>
                <el-option label="永不过期" value="2"></el-option>
                <el-option label="指定日期" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="密码过期时间">
              <el-date-picker
                :disabled="pwTime"
                v-model="userInfo.pwExpireDate"
                style="width:100%"
                type="date"
                placeholder="选择密码过期时间"
                :picker-options="pickerOptions1"
              >></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证件类型">
              <el-select v-model="userInfo.cardType" placeholder="请选择证件类型" style="width:100%">
                <el-option label="身份证" value="1"></el-option>
                <el-option label="军官证" value="2"></el-option>
                <el-option label="户口本" value="3"></el-option>
                <el-option label="护照" value="4"></el-option>
                <el-option label="其他" value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="证件号码">
              <el-input v-model="userInfo.cardId" placeholder="请输入证件号码" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话">
              <el-input v-model="userInfo.tel" placeholder="请输入联系电话" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属部门">
              <el-select v-model="userInfo.department" placeholder="请选择所属部门" style="width:100%">
                <el-option label="部门" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="所属地区">
              <el-cascader
                expand-trigger="hover"
                :options="orgNameOptions"
                v-model="orgName"
                @change="handleChangeOrgName"
                :props="props"
                style="width:100%"
                :clearable="true"
                :change-on-select="true"
                placeholder="请选择所属地区"
              ></el-cascader>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="所属机构">
              <el-select
                :disabled="disabledOrgId"
                v-model="userInfo.orgId"
                placeholder="请选择所属机构"
                style="width:100%"
              >
                <el-option
                  v-for="item in orgIdOptions"
                  :key="item.id"
                  :label="item.orgName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>管辖行政区划</span>
              </div>
              <el-checkbox-group v-model="checkList" @change="checkListChange">
                <p v-for="item of areaList" :key="item.id">
                  <el-checkbox
                    :label="item.id"
                    :index="item.id"
                    :disabled="item.id == orgName[orgName.length-1]?true:false"
                  >{{item.areaName}}</el-checkbox>
                </p>
              </el-checkbox-group>
            </el-card>
          </el-col>
          <el-col :span="13" :offset="1">
            <el-transfer
              :titles="['可选角色', '已选角色']"
              @change="transfeChange"
              v-model="userInfo.roleIds"
              :data="transferData"
              :props="{
                key: 'id',
                label: 'roleName'
              }"
            ></el-transfer>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogSave('ruleFrom')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value !== this.userInfo.passwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() <= Date.now();
        }
      },
      disabledOrgId: false,
      treeData: [],
      areaList: [],
      pwTime: true,
      orgIdOptions: [],
      props: {
        label: "areaName",
        value: "id"
      },
      formInline: {
        logonName: "",
        displayName: "",
        orgId: [],
        userState: ""
      },
      dialogFormRules: {
        logonName: [
          { required: true, message: "请输入登录名", trigger: "blur" }
        ],
        displayName: [
          { required: true, message: "请输入姓名", trigger: "blur" }
        ],
        userType: [
          { required: true, message: "请输入用户类型", trigger: "blur" }
        ],
        orgName: [
          { required: true, message: "请输入所属地区", trigger: "blur" }
        ],
        orgId: [{ required: true, message: "请输入所属机构", trigger: "blur" }],
        passwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
        checkPass: [
          { required: true, message: "请确认密码", trigger: "blur" },
          { validator: validatePass, trigger: "blur" }
        ]
      },
      orgNameOptions: [],
      orgName: [],
      userInfo: {
        logonName: "",
        displayName: "",
        userType: "",
        checkPass: "",
        passwd: "",
        userExpireDate: "",
        pwExpireType: "",
        pwExpireDate: "",
        cardType: "",
        cardId: "",
        tel: "",
        department: "",
        shortName: "",
        orgId: "",
        roleIds: []
      },

      checkList: [],
      transferData: [],
      page: 1,
      size: 10,
      dialogTitle: "添加用户",
      tableData: [],
      dialogFormVisible: false,
      settingTotal: 0
    };
  },
  created() {
    this.initTable();
    this.$get("/sys/org/queryTree").then(data => {
      
      if (data.data.success) {
        this.treeData = data.data.result;
      }
    });
  },

  computed: {
    userTypeDisabled() {
      return this.userInfo.userType == "1" ? true : false;
    }
  },
  methods: {
    initTable() {
      this.$get("sys/user/queryTable", {
        page: this.page,
        size: this.size,
        ...this.formInline,
        orgId: this.formInline.orgId.length
          ? this.formInline.orgId[this.formInline.orgId.length - 1]
          : ""
      }).then(data => {
        this.tableData = data.data.pageList.result;
        this.settingTotal = Number(data.data.count);
      });
    },
    userDateChange(value) {
      

      this.userInfo.userExpireDate = value;
    },
    pwChange(val) {
      if (val == 3) {
        this.pwTime = false;
      } else {
        this.pwTime = true;
        this.userInfo.pwExpireDate = "";
      }
    },
    uesrTypeChange(val) {
      this.userInfo.roleIds = [];
      this.$get("sys/user/getRoleTreeNodes", {
        userType: val
      }).then(data => {
        
        if (data.data.success) {
          this.transferData = [];
          this.transferData = data.data.result;
        }
      });
    },
    dialogSave(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          
          // if (!this.checkList.length) {
          //   this.$message({
          //     type: "error",
          //     message: "请选择管辖行政区划"
          //   });
          //   return;
          // }
          if (!this.userInfo.userType) {
            this.$message({
              type: "error",
              message: "请选择用户类型"
            });
            return;
          }
          if (!this.userInfo.roleIds.length) {
            this.$message({
              type: "error",
              message: "请选择角色"
            });
            return;
          }
          let orgName1 = this.orgName[this.orgName.length - 1];
          let arr1 = [];
          let arr2 = [];
          for (let item of this.checkList) {
            arr1.push({ id: item });
          }
          for (let item of this.userInfo.roleIds) {
            arr2.push({ id: item });
          }
          
          let aa = {
            ...this.userInfo,
            areaIds: arr1,
            areaId: orgName1,
            roleIds: arr2
          };
          if ((this.dialogTitle = "编辑用户")) {
            aa.userExpireDate = new Date(aa.userExpireDate);
            aa.pwExpireDate = new Date(aa.pwExpireDate);
          }
          
          
          this.$post("sys/user/doSave", aa).then(data => {
            if (data.success) {
              this.dialogFormVisible = false;

              this.initTable();
            }
            this.$mess(data);
          });
        } else {
          
          return false;
        }
      });
    },
    transfeChange(value, direction, movedKeys) {
      

      
    },
    handleChangeOrgName(val) {
      this.orgName = val;
      if (this.orgName.length < 3) {
        this.disabledOrgId = true;
        this.userInfo.orgId = "";
      } else {
        this.disabledOrgId = false;
      }
      this.$get("sys/user/getOrgTreeNodes", {
        areaId: val[val.length - 1]
      }).then(data => {
        if (data.data.success) {
          this.userInfo.orgId = "";
          this.orgIdOptions = data.data.result[0].children;
        }
      });
      

      this.$get("sys/user/getAreaList", {
        areaId: val.length == 1 ? val[0] : val[val.length - 2]
      }).then(data => {
        if (data.data.success) {
          this.areaList = data.data.result;
          
          this.checkList = [];
          this.checkList.push(val[val.length - 1]);
        }
      });
    },
    onSearch() {
      
      this.initTable();
    },
    onAddUser() {
      this.transferData = [];
      this.areaList = [];
      this.checkList = [];
      this.orgName = [];
      this.userInfo = {
        logonName: "",
        displayName: "",
        userType: "",
        checkPass: "",
        passwd: "",
        userExpireDate: "",
        pwExpireType: "",
        pwExpireDate: "",
        cardType: "",
        cardId: "",
        tel: "",
        department: "",
        shortName: "",
        orgId: "",
        roleIds: []
      };
      this.dialogTitle = "新增用户";
      this.dialogFormVisible = true;
      this.$get("sys/user/getAreaTreeNodes").then(data => {
        
        if (data.data.success) {
          this.orgNameOptions = data.data.result;
        }
      });
    },
    handleSizeChange(val) {
      
      this.size = val;
      this.initTable();
      
    },
    checkListChange(val) {
      
      this.checkList = val;
    },
    handleCurrentChange(val) {
      this.page = val;
      this.initTable();
      
    },
    tableEdit(index, row) {
      this.dialogTitle = "编辑用户";
      this.$get("sys/user/queryOneUser", {
        userId: row.id
      }).then(data => {
        if (data.data.success) {
          
          var DATA = data.data;
          this.userInfo = {
            logonName: data.data.result.sysUser.logonName,
            displayName: data.data.result.sysUser.displayName,
            userType: data.data.result.sysUser.userType,
            checkPass: data.data.result.sysUser.checkPass,
            passwd: data.data.result.sysUser.passwd,
            userExpireDate: data.data.result.sysUser.userExpireDate,
            pwExpireType: data.data.result.sysUser.pwExpireType,
            pwExpireDate: data.data.result.sysUser.pwExpireDate,
            cardType: data.data.result.sysUser.cardType,
            cardId: data.data.result.sysUser.cardId,
            tel: data.data.result.sysUser.tel,
            department: data.data.result.sysUser.department,
            shortName: data.data.result.sysUser.shortName,
            orgId: data.data.result.sysUser.orgId,
            roleIds: [],
            id: data.data.result.sysUser.id
          };
          // this.userInfo.userExpireDate = new Date(
          //   data.data.result.sysUser.userExpireDate
          // );
          // this.userInfo.pwExpireDate = new Date(
          //   data.data.result.sysUser.pwExpireDate
          // );

          if (this.userInfo.pwExpireType == "3") {
            this.pwTime = false;
          }

          this.userInfo.roleIds = [];
          this.dialogFormVisible = true;
          this.userInfo.checkPass = data.data.result.sysUser.passwd;
          // this.userInfo.orgId = DATA.sysOrgs.orgName
          this.orgName = data.data.result.areaArray;

          if (this.orgName.length < 3) {
            this.disabledOrgId = true;
            this.userInfo.orgId = "";
          } else {
            this.disabledOrgId = false;
          }
          this.$get("sys/user/getOrgTreeNodes", {
            areaId: DATA.result.areaArray[DATA.result.areaArray.length - 1]
          }).then(data => {
            if (data.data.success) {
              this.orgIdOptions = data.data.result[0].children;
              
            }
          });
          this.$get("sys/user/getAreaTreeNodes").then(data => {
            
            if (data.data.success) {
              this.orgNameOptions = data.data.result;
            }
          });
          this.$get("sys/user/getAreaList", {
            areaId: DATA.result.areaArray[DATA.result.areaArray.length - 2]
          }).then(data => {
            if (data.data.success) {
              this.areaList = data.data.result;
              this.checkList = [];
              for (let item of DATA.result.areaList) {
                this.checkList.push(item.areaId);
              }
            }
          });
          this.$get("sys/user/getRoleTreeNodes", {
            userType: DATA.result.sysUser.userType
          }).then(data => {
            
            if (data.data.success) {
              this.transferData = data.data.result;
              

              
              for (let item of DATA.result.roleList) {
                this.userInfo.roleIds.push(item.id);
              }
            }
          });
        }
        if (!data.data.success) {
          this.$message({
            type: "error",
            message: data.data.resultDes
          });
        }
      });
    }
  }
};
</script>

<style scoped lang="css">
/deep/ [class*=" el-icon-"],
[class^="el-icon-"] {
  color: #5fb9ee;
  font-size: 20px;
  cursor: pointer;
}
.pageblock {
  width: 100%;
  text-align: center;
  margin-top: 30px;
}
.iconfont {
  color: #5fb9ee;
  font-size: 19px;
  cursor: pointer;
}
.icon-jiesuo {
  font-size: 22px;
}
.searchFrom /deep/ .el-form-item {
  display: flex;
}
</style>
